<template>
    <div>
        <div style="height:30px;margin-top:3px">
            <Button type="primary" @click="handleCreate()">录入</Button>
        </div>
        <Modal v-model="modalSs11009" :title=title width="750" cancel-text="关闭" style="position:relative;">
            <Spin v-if="LoadingModal" size="large" fix></Spin>
            <Form ref="dataSs11009" :model="dataSs11009" :rules="ruleSs11009" inline :label-width="130" :disabled=readonly>
                <table style="width:100%;">
                    <tr>
                        <td style="width:50%;">
                            <FormItem label="人员姓名" prop="ssbg0001">
                                <dictSelect :sel_val='dataSs11009.ssbg0001' dicType="service" :bindData.sync="dataSs11009.ssbg0001"  :serviceParam="serviceParam"
                                            dictService="/api/ac/subsistence/ss11002Service/getAssistanceMemberList" class="itemStyle"/>
                            </FormItem>
                        </td>
                        <td style="width:50%;">
                            <FormItem label="学校名称" prop="ssbg0002">
                                <Input v-model="dataSs11009.ssbg0002" placeholder=""  class="itemStyle" maxlength="50"/>
                            </FormItem>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <FormItem label="学校类别" prop="ssbg0003">
                                <dictSelect :sel_val='dataSs11009.ssbg0003' :bindData.sync="dataSs11009.ssbg0003" dictCode="schoolcategory"  class="itemStyle"/>
                            </FormItem>
                        </td>
                        <td>
                            <FormItem label="学习性质" prop="ssbg0004">
                                <dictSelect :sel_val='dataSs11009.ssbg0004' :bindData.sync="dataSs11009.ssbg0004" dictCode="studynature"  class="itemStyle"/>
                            </FormItem>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <FormItem label="入学时间" prop="ssbg0007">
                                <DatePicker type="date" v-model="dataSs11009.ssbg0007" placeholder="" class="itemStyle" />
                            </FormItem>
                        </td>
                        <td>
                            <FormItem label="毕业时间" prop="ssbg0008">
                                <DatePicker type="date" v-model="dataSs11009.ssbg0008" placeholder="" class="itemStyle" />
                            </FormItem>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <FormItem label="学历" prop="ssbg0009">
                                <dictSelect :sel_val='dataSs11009.ssbg0009' :bindData.sync="dataSs11009.ssbg0009" dictCode="education"  class="itemStyle"/>
                            </FormItem>
                        </td>
                        <td>
                            <FormItem label="学位" prop="ssbg0010">
                                <dictSelect :sel_val='dataSs11009.ssbg0010' :bindData.sync="dataSs11009.ssbg0010" dictCode="degree"  class="itemStyle"/>
                            </FormItem>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <FormItem label="学校地址" prop="ssbg0005">
                                <Input v-model="dataSs11009.ssbg0005" placeholder=""  class="itemStyle" maxlength="50"/>
                            </FormItem>
                        </td>
                        <td>
                            <FormItem label="联系电话" prop="ssbg0006">
                                <Input v-model="dataSs11009.ssbg0006" placeholder=""  class="itemStyle" maxlength="20"/>
                            </FormItem>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <FormItem label="专业名称" prop="ssbg0011">
                                <Input v-model="dataSs11009.ssbg0011" placeholder=""  class="itemStyle" maxlength="30"/>
                            </FormItem>
                        </td>
                        <td>
                            <FormItem label="学籍等级" prop="ssbg0013">
                                <dictSelect :sel_val='dataSs11009.ssbg0013' :bindData.sync="dataSs11009.ssbg0013" dictCode="studyyear"  class="itemStyle"/>
                            </FormItem>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <FormItem label="备注" prop="ssbg0012">
                                <Input type="textarea" :rows="2" v-model="dataSs11009.ssbg0012" placeholder="" style="width:540px" maxlength="100"/>
                            </FormItem>
                        </td>
                    </tr>
                </table>
            </Form>
            <div slot="footer">
                <Button type="text" size="large" @click="modalSs11009 = false">取消</Button>
                <Button type="primary" size="large"  @click="handleSubmitSs11009('dataSs11009')" v-if=!readonly>确定</Button>
            </div>
        </Modal>
        <div style="margin-top: 10px">
            <Table :columns="columns" :data="tableData" :loading="Loading" border>
                <template slot-scope="{ row, index}" slot="action">
                    <Button type="info" size="small" style="margin-right: 5px" @click="handleEdit(index)">编辑</Button>
                    <Button type="error" size="small" style="margin-right: 5px" @click="handleDelete(index)">删除</Button>
                    <Button type="success" size="small" style="margin-right: 5px" @click="handleView(index)">详情</Button>
                </template>
            </Table>
            <div style="margin: 10px;overflow: hidden">
                <div style="float: right;">
                    <Page :total="dataCount" :page-size="pageSize" show-total class="paging"
                          @on-change="handleTableChange" :current="pageNo"></Page>
                </div>
            </div>
        </div>
        <div style="height:40px;line-height:40px;margin-top:10px;text-align: center">
            <Button @click="prevStep" >上一步</Button>
            <Button type="primary" @click="nextStep()"  :loading="btnLoading"
                    style="margin-left:20px">下一步
            </Button>
        </div>
    </div>
</template>
<script>
  import {CommonMixin} from '@/views/common/js/CommonMixin'
  import dictSelect from '@/components/dictSelect/dictSelect.vue'
  import {postAction} from '@/api/request'
  import DateFormat from '@/plugins/format.js'

  export default {
    components: { dictSelect },
    mixins: [CommonMixin],
    data () {
      return {
          LoadingModal: false,
        readonly:false,
        serviceParam:{
          azcp0500:''
        },
        modalSs11009:false,
        columns: [
          {
            title: '人员姓名',
            align: 'center',
            key: 'ssbg0001_name',
          },
          {
            title: '学校名称',
            align: 'center',
            key: 'ssbg0002',
          },
          {
            title: '学校类别',
            align: 'center',
            key: 'ssbg0003_name',
          },
          {
            title: '学习性质',
            align: 'center',
            key: 'ssbg0004_name',
          },
          {
            title: '入学时间',
            align: 'center',
            key: 'ssbg0007',
            render: (h, params) => {
              let value = params.row.ssbg0007
              if (typeof (value) === 'undefined' || value === null || value === '' || value === undefined) {
                value = '--'
              }else{
                value = DateFormat( value, 'YYYY-MM-DD')
              }
              return h('span', value + ' ')
            },
          },
          {
            title: '毕业时间',
            align: 'center',
            key: 'ssbg0008',
            render: (h, params) => {
              let value = params.row.ssbg0008
              if (typeof (value) === 'undefined' || value === null || value === '' || value === undefined) {
                value = '--'
              }else{
                value = DateFormat( value, 'YYYY-MM-DD')
              }
              return h('span', value + ' ')
            },
          },
          {
            title: '学历',
            align: 'center',
            key: 'ssbg0009_name',
          },
          {
            title: '操作',
            slot: 'action',
            align:'center',
            width:200,
            fixed:'right'
          }
        ],
        tableData: [],
        Loading: false,
        btnLoading:false,
        dataCount: 0,
        pageSize: 10,
        familyInfo: {},
        queryParam: {},
        ss11001Id: '',
        url: {
          list: '/api/ac/subsistence/ss11009Service/getPageList',
          delete: '/api/ac/subsistence/ss11009Service/deleteData',
          insertSs11009:"/api/ac/subsistence/ss11009Service/insertData",
          updateSs11009:"/api/ac/subsistence/ss11009Service/updateData",
        },
        title:'',
        dataSs11009: {
          id: '',
          ssbg0001: '',
          ssbg0003: '',
          ssbg0004: '',
          ssbg0005: '',
          ssbg0006: '',
          ssbg0007: null,
          ssbg0008: null,
          ssbg0009: '',
          ssbg0010:'',
          ssbg0011:'',
          ssbg0012:'',
          ssbg0013:'',
        },
        fieldsToValidate: ["ssbg0001","ssbg0002","ssbg0003","ssbg0004","ssbg0007","ssbg0008","ssbg0009"],
        ruleSs11009: {
          ssbg0001: [
            {required: true, message: '请选择人员', trigger: 'blur'}
          ],
          ssbg0002: [
            {required: true, message: '填写学校名称', trigger: 'blur'}
          ],
          ssbg0003: [
            {required: true, message: '请选择学校类别', trigger: 'blur'}
          ],
          ssbg0004: [
            {required: true, message: '请选择学习性质', trigger: 'blur'}
          ],
          ssbg0007: [
            {required: true, message: '请选择入学时间', trigger: 'blur',type:'date'}
          ],
          ssbg0008: [
            {required: true, message: '请选择毕业时间', trigger: 'blur',type:'date'}
          ],
          ssbg0009: [
            {required: true, message: '请选择学历', trigger: 'blur'}
          ],
        },
      }
    },
    methods: {
      prevStep () {
        this.$emit('prevStep')
      },
      nextStep () {
        let that=this;
        this.$emit('nextStep')
      },
      handleEdit (index) {
        let that=this;
        that.readonly=false;
        that.title="教育信息编辑"
        let record=that.tableData[index];
        if (record.id) {
          that.edit(record)
        } else {
          that.$Message.error('请选择操作数据');
        }
      },
      handleCreate () { // 录入
        let that=this;
        that.readonly=false;
        that.create()
      },
      handleDelete (index) {
        let that=this;
        let record=that.tableData[index];
        if (record.id) {
          this.$Modal.confirm({
            title: '确定删除吗',
            onOk: () => {
              let url=that.url.delete;
              let dataParam={};
              dataParam.id=record.id;
              postAction(url, dataParam).then((res) => {
                if(res.data.data.code==1) {
                  that.$Message.success(res.data.data.msg);
                  that.reloadData();
                } else {
                  that.$Message.error(res.data.data.msg);
                }
              });
            },
            onCancel: () => {
            }
          });

        } else {
          that.$Message.error('请选择操作数据');
        }
      },
      handleView(index){
        let that=this;
        that.readonly=true;
        that.title="教育信息详情"
        let record=that.tableData[index];
        if (record.id) {
          that.edit(record)
        } else {
          that.$Message.error('请选择操作数据');
        }
      },
      reloadData() {
        let that=this;
        that.queryParam.azcp0500=that.ss11001Id;
        that.loadData();
      },
      create(){
        let that=this;
        that.dataSs11009 = {}
        that.title="教育信息录入"
        that.modalSs11009 = true
      },
      edit(record){
        let that=this;
        that.modalSs11009 = true
        that.dataSs11009 = Object.assign({}, record);
        if(record.ssbg0007){
          that.dataSs11009.ssbg0007=new Date(record.ssbg0007);
        }
        if(record.ssbg0008){
          that.dataSs11009.ssbg0008=new Date(record.ssbg0008);
        }
      },
      handleSubmitSs11009 (name) {
        let that=this;
          that.LoadingModal = true;
        let validate = true;
        let err_msg=[];
        for(let item of that.fieldsToValidate){
          that.$refs[name].validateField(item, (error) => {
            if (error) {
              validate = false;
              err_msg.push(error);
            }
          })
        }
        if (validate) {
          let dataParam = {}
          dataParam = Object.assign({}, that.dataSs11009)
          let url=null;
          if(dataParam.id==null){
            url=that.url.insertSs11009
          }else{
            url=that.url.updateSs11009
          }

          postAction(url, dataParam).then((res) => {
            if(res.data.data.code==1) {
              that.modalSs11009 = false
              that.$Message.success(res.data.data.msg)
              that.reloadData();
            } else {
              that.$Message.error(res.data.data.msg);
            }
          }).finally(() => {
              that.LoadingModal = false;
          })
        }else{
            that.LoadingModal = false;
          that.$Message.error(err_msg[0]);
          return;
        }
      },
    },
    mounted () {

    },
    created() {
      let that=this;
      that.familyInfo = that.$parent.familyInfo;
      that.ss11001Id=that.familyInfo.ss11001Id;
      that.queryParam.azcp0500=that.familyInfo.ss11001Id;
      this.loadData();

      that.serviceParam.azcp0500=that.familyInfo.ss11001Id
    },
  }
</script>
<style scoped>
    /deep/.ivu-form-item-error-tip {
        display: none;
    }
    .ivu-form-item {
        margin-bottom: 0px;
    }
    .itemStyle{
        width:180px
    }
</style>
